<template>
  <view class="new_page">
    <view class="main">
      <view
        class="add_js"
        @click="goToPage('/pagesA/addTechnician/addTechnician')"
      >
        <uni-icons type="plusempty" size="24" color="#bab6b6"></uni-icons>
        <view class="text">
          <text>添加技师信息</text>
        </view>
      </view>
      <view class="js_wrap">
        <template v-if="jsList.length > 0">
          <view class="js_item" :key="index" v-for="(item, index) in jsList">
            <view class="img">
              <image :src="item.imageUrl" mode="widthFix"></image>
            </view>
            <view
              class="right"
              @click="
                goToPage('/pagesA/editTechnician/editTechnician?id=' + item.id)
              "
            >
              <view class="top">
                <text class="js_name">{{ item.name }}</text>
                <text class="text-grey time"
                  >工作年限：{{ item.workingYears }}</text
                >
              </view>
              <view class="bottom">
                <text class="text-grey">职称：{{ item.title }}</text>
              </view>
              <view class="bottom">
                <text class="text-grey">专业：{{ item.aptitude }}</text>
              </view>
              <view class="bottom sc">
                <text class="text-grey">擅长项目：{{ item.expertIn }}</text>
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <empty></empty>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import { getjsList } from "@/request/api.js";
import { toast, useRouter } from "@/request/utils.js";
export default {
  data() {
    return {
      jsList: [],
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    };
  },
  onLoad() {},
	onShow() {
		this.getList();
	},
  mounted() {
    console.log("center mounted");
    
  },
  methods: {
    swipeChange(e, index) {
      console.log("当前状态：" + e + "，下标：" + index);
    },
    handleShanChu(item) {
      uni.showModal({
        title: "提示！",
        content: "是否删除？",
        cancelText: "取消",
        success: (res) => {
          if (res.confirm) {
            console.log("点击删除", item);
          }

          if (res.cancel) {
          }
        },
      });
    },
    async getList() {
      let name = this.name;
      let status = this.activeIndex;
      let res = await getjsList({
        name: name,
        status: status,
      });
      this.jsList = res.data;
    },
  },
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 2000);
  },
};
</script>

<style lang="scss" scoped>
.new_page {
  width: 699.28rpx;
  padding-top: 30rpx;
  margin: auto;
  padding-bottom: 50rpx;

  .main {
    // padding: 0 20rpx 20rpx;
    // background-color: #fff;
    // border-radius: 20rpx;
    .add_js {
      padding: 40rpx 0;
      background-color: #fff;
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .text {
        margin-left: 10rpx;
      }
    }

    .js_wrap {
      /deep/ .uni-swipe_button-group {
        border-radius: 20rpx;
        margin-top: 30rpx;
        overflow: hidden;
      }
      .js_o {
        padding-top: 30rpx;
      }
      .js_item {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
				margin-top: 30rpx;

        .img {
          width: 80rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 20rpx;
        }

        .right {
          flex: 1;

          .top {
            margin-bottom: 10rpx;
						.js_name {
							font-weight: bold;
							color: #333;
						}
          }

          .top,
          .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
					
          .text-grey {
            font-size: 28rpx;
            color: $text-grey;
          }
					.bottom {
						color: #3d3d3d;
						font-size: 28rpx;
						margin-top: 4rpx;
						&.sc {
							line-height: 42rpx;
						}
					}

          .time {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>